<cfparam name="ui" type="string" default="productCategories" />
<cfscript>
	ui = "productCategories";
	view = "grid";
	obj = "productCategory";
	productCategories = request.ProductCategoryGateway.query(Active = 1);
	defaultFilter = {productCategoryIDs = ""};
	filter = request.Base.getUIFilter(ui = ui, defaultFilter = defaultFilter);
</cfscript>
<script type="text/javascript">
<!--	
	<cfoutput>
		var ui = "#ui#";
		var view = "#view#";
		var obj = "#obj#";
		var productCategories = #SerializeJSON(productCategories)#;
		var filter = #SerializeJSON(filter)#;
	</cfoutput>
	
	var saveProductCategoriesOrder = function() {
		var productCategoriesOrderListItems = $("#productCategoriesOrderList").children();
		var productCategoriesIDsOrder = [];
		for (var i=0; i<productCategoriesOrderListItems.length; i++) {
			productCategoriesIDsOrder.push(productCategoriesOrderListItems[i].id.split("_")[1]);
		}
		$("#productCategoryIDsOrder").val(productCategoriesIDsOrder.toString());
		$("#productCategoriesOrderForm").submit();
	}
	
	var gridColumnsConfig = [
		{field: "product_category_id", title: "ID", template: "<a href='?ui=productCategory&Product_Category_ID=#=product_category_id#'>#=product_category_id#</a>", width: 70},
		{field: "category", title: "Category"},
		{field: "subcategory", title: "Subcategory"},
		{field: "product_count", title: "Products", width: 100}
	]

	$(function() {
		$("#grid").kendoGrid({
			dataSource: getGridDataSourceConfig(obj),
			columns: gridColumnsConfig,
			sortable: {allowUnsort: false},
			scrollable: true,
			pageable: gridPageableConfig,
			resizable: true,
			dataBound: function(e) {gridOnDataBound(this)}
		})
		$("#productCategoriesOrderList").sortable();
		$("#productCategoriesOrderList").disableSelection();
	});
//-->
</script>

<cfoutput>

	<div class="row" style="margin-bottom: 10px;">
		<div class="col-lg-12">
			<a href="#script_name#?ui=productCategory&Product_Category_ID=0" class="btn btn-info">New&nbsp;product&nbsp;category</a>
			<a data-toggle="modal" href="##productCategoriesOrderModal" class="btn btn-info">Reorder product categories</a>
			<span class="pull-right"><span id="countLabel" class="badge"></span></span>
		</div>
	</div>
	
	<div id="loading">
		<div class="progress progress-striped active" style="margin-left: 25%; margin-right: 25%; margin-top: 40px;">
			<div class="progress-bar progress-bar-info"  role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
			</div>
		</div>
	</div>
	<div id="grid" style="display: none;"></div>
	<div id="noRecs" class="alert alert-info" style="display: none;">No product categories</div>
	
	<div class="modal fade" id="productCategoriesOrderModal" tabindex="-1" role="dialog" data-backdrop="static" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title">Reorder Product Categories</h4>
				</div>
				<div class="modal-body">
					<p>Drag and drop product categories to the desired order.</p>
					<ul id="productCategoriesOrderList" style="margin: 0; padding-left: 6px; list-style-type: none;">
						<cfloop query="productCategories">
							<li id="productCategoryIDOrder_#Product_Category_ID#" style="line-height: 2em;"><i class="icon-sort"></i>&nbsp;&nbsp;#Category#<cfif Len(Subcategory) gt 0> - #Subcategory#</cfif></li>
						</cfloop>
					</ul>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
					<button type="button" class="btn btn-info" onclick="saveProductCategoriesOrder();">Save Changes</button>
				</div>
			</div>
		</div>
	</div>
	
	<form id="productCategoriesOrderForm" action="#script_name#" method="post" style="display: none;">
		<input type="hidden" name="action" value="saveProductCategoriesOrder" />
		<input type="hidden" name="ui" value="#ui#" />
		<input type="hidden" id="productCategoryIDsOrder" name="productCategoryIDsOrder" value="" />
	</form>	

</cfoutput>